<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>3D轮播卡片</title>
  <style>
    * {
      /* 初始化 取消内外边距 */
      margin: 0;
      padding: 0;
    }

    body {
      /* 100%窗口高度 */
      height: 100vh;
      /* 弹性布局 水平垂直居中 */
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      background: url('./images/bg.jpg') center;
      background-size: cover;
    }

    .container {
      width: 600px;
      height: 350px;
      margin-top: 60px;
      /* 这个属性用来增加卡片旋转的立体感 */
      perspective: 1000px;
      /* 相对定位 */
      position: relative;
    }

    .card-box {
      /* 绝对定位 */
      position: absolute;
      width: 100%;
      height: 100%;
      /* 给父元素加一个3D盒子属性 */
      transform-style: preserve-3d;
      transform: rotateY(0) translateZ(-700px);
      /* 执行动画：动画名 时长 贝塞尔曲线 无限次播放 */
      animation: cardRotate 10s cubic-bezier(0.77, 0, 0.175, 1) infinite;
    }

    .card {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      /* 设置元素的倒影效果，below是倒影在元素下方，15px是元素和倒影的距离，后面的属性是设置倒影渐变 */
      -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%, rgba(255, 255, 255, 0.3));
    }

    .card img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }

    /* 为每一个卡片设置初始化位置和旋转角度 */
    .card:nth-child(1) {
      transform: rotateY(0) translateZ(700px);
    }

    .card:nth-child(2) {
      transform: rotateY(120deg) translateZ(700px);
    }

    .card:nth-child(3) {
      transform: rotateY(240deg) translateZ(700px);
    }

    /* 定义动画 */
    @keyframes cardRotate {

      0%,
      20% {
        transform: translateZ(-700px) rotateY(0);
      }

      45% {
        transform: translateZ(-700px) rotateY(-120deg);
      }

      75% {
        transform: translateZ(-700px) rotateY(-240deg);
      }

      100% {
        transform: translateZ(-700px) rotateY(-360deg);
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="card-box">
      <div class="card">
        <img src="./images/1.jpeg">
      </div>
      <div class="card">
        <img src="./images/2.jpeg">
      </div>
      <div class="card">
        <img src="./images/3.jpg">
      </div>
    </div>
  </div>
</body>

</html>